<template>
	<view class="">
		<view class="content">
			<!-- 搜索框 -->
			<view class="search-bar">
				<uni-search-bar @confirm="search" v-model="storeName" placeholder="请输入搜索内容" />
			</view>
			<!-- 广告牌 -->
			<view class="ad">
				<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
					<swiper class="swiper-box " @change="change">
						<swiper-item v-for="(item ,index) in info" :key="index">
							<view class="imageClass">
								<image :src="item.image" mode="" style="height: 350rpx;"></image>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<!-- 店铺 -->
			<scroll-view>
				<block v-for="(item,index) in list" :key="index">
				<view class="store" @tap="toStore(item.id)">
					<view class="left ">
						<image :src="item.avatar ||errorImage" mode="" class="image"></image>
						<!-- <image src="../../static/errorImage.jpg" mode="" class="image"></image> -->
					</view>
					<view class="right">
						<view class="font-title">
							{{item.name}}
						</view>
						<view class="">
							<uni-icons type="location-filled"></uni-icons>{{item.address}}
						</view>
						<view class="foun-span">
							月销100+ <span>人均25</span>
						</view>
					</view>
				</view>
				</block>
			</scroll-view>
		</view>
	</view>



</template>

<script>
	export default {

		data() {
			return {
				page:1,
				pageSize:10,

				info: [{
					image: '../../static/lunbotu/lunbotu1.png'
				}, {
					image: '../../static/lunbotu/lunbotu2.png'
				}, {
					image: '../../static/lunbotu/lunbotu3.png'
				}],
				current: 0,
				mode: 'round',
				storeName:"",

				list: {

				}

			}
		},
		onLoad(){
			const parmars = {
				page:this.page,
				pageSize:this.pageSize
			}
			this.getStorePage(parmars)
			
		},
		methods: {
			//todo 回头做搜索页面的事间
			search(res) {
				console.log(res)
				let parmars={
					page:this.page,
					pageSize:this.pageSize,
					name:this.storeName
				}
				this.getStorePage(parmars)
			},
			change(e) {
				this.current = e.detail.current;
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
			,
			// 获取当前页面的店铺数
			getStorePage(parmars){
				this.$https({
					url:'/store/page',
					methods:"get",
					data:{
						...parmars
					},
					success:res=>{
						this.list=res.data.records
					}
				})
			},
			
			toStore(id){
				console.log(id)
				uni.navigateTo({
					url:'/pages/index/index?id='+id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.ad {
		margin-top: 20rpx;
		padding: 12px;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.search-bar{
		border-radius: 20px;
		background-color: #fff;
	}

	.content {
		margin: 30rpx;
	}

	.imageClass {
		
		justify-content: center;
		align-items: center;
	}

		
	.store{
		display: flex;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}

	.left {
		width: 160rpx;
		height: 160rpx;
		padding: 10rpx;
		/* background-color: red; */
		margin-right: 10rpx;
	}
		.image{
			
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	

	.right {
		margin-left: 5rpx;
	}
		view{
			font-size: 18;
			margin-top: 5px;
		}
		
	.font-title{
		font-size: 20;
		font-weight: bold;
	}
		
	.foun-span{
		color: #f6ee57;
	}
		
</style>